<template>
  <div class="notify">
    <h2>站内公告:</h2>
    <div class="textBox">
      <transition name="slide">
        <p class="text" :key="text.id"> <i class="iconfont">&#xe60a;</i> {{text.val}}</p>
      </transition>
    </div>
  </div>
</template>

<script>
export default {
  name: "scroll",
  data() {
    return {
      textArr: [
        " 热烈欢迎！热烈欢迎！新访客的到来",
        " 庆祝本站创立成功,希望大家多多支持",
        " 点击右上角登录即可发表文章哦！"
      ],
      number: 0
    };
  },
  computed: {
    text() {
      return {
        id: this.number,
        val: this.textArr[this.number]
      };
    }
  },
  mounted() {
    this.startMove();
  },
  methods: {
    startMove() {
      // eslint-disable-next-line
      let timer = setTimeout(() => {
        if (this.number === 2) {
          this.number = 0;
        } else {
          this.number += 1;
        }
        this.startMove();
      }, 4000); // 滚动不需要停顿则将2000改成动画持续时间
    }
  }
};
</script>

<style lang='scss' scoped>
.notify {
  background-color: #fcf8e3;
  margin-bottom: 15px;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 3px #e1e1e1;
  box-shadow: 0 0 3px #e1e1e1;
  
  box-sizing: border-box;
  padding: 10px;
  h2 {
    margin-bottom: 15px;
    font-size: 16px;
    font-weight: bold;
  }
  .textBox {
    width: 100%;
    height: 20px;
    margin: 0 auto;
    overflow: hidden;
    position: relative;
    text-align: left;
    font-size: 10px;
  }
  .text {
    width: 100%;
    position: absolute;
    bottom: 0;
  }
  .slide-enter-active,
  .slide-leave-active {
    transition: all 0.3s e;
  }
  .slide-enter {
    transform: translateY(20px) scale(1);
  }
  .slide-leave-to {
    transform: translateY(-20px) scale(1);
  }
}
</style>